<template>
  <div class="myData" >
    <!--  导航开始 -->
    <commonHeader :title="title" @goBack="goBack"></commonHeader>
    <div class="content">
      <div class="contentList">
        <!--      我的数据-->
        <div class="commonBg commonContainer">
          <div class="title flex-start borderBottom">
            <div>我的数据</div>
          </div>
          <div class="lists flex-space-between">
            <!--          粉丝-->
            <div class="listItems borderRight borderBottom">
              <h3 class="flex-start">粉丝</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{userData.fans_count*1?userData.fans_count*1:0 | dataWord}}</div>
                <div v-if="userData.fans_count_diff*1>0">+{{userData.fans_count_diff*1}}</div>
              </div>
            </div>
            <!--          点赞-->
            <div class="listItems borderBottom">
              <h3 class="flex-start">点赞</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{userData.digg_count*1?userData.digg_count*1:0 | dataWord}}</div>
                <div v-if="userData.digg_count_diff*1>0">+{{userData.digg_count_diff*1}}</div>
              </div>
            </div>
            <!--          作品-->
            <div class="listItems borderRight borderBottom">
              <h3 class="flex-start">作品</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{userData.video_count*1?userData.video_count*1:0 | dataWord}}</div>
                <div v-if="userData.video_count_diff*1>0">+{{userData.video_count_diff*1}}</div>
              </div>
            </div>
            <!--          合约-->
            <div class="listItems borderBottom">
              <h3 class="flex-start">合约</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{userData.contract_count*1?userData.contract_count*1:0 | dataWord}}</div>
                <div v-if="userData.contract_count_diff*1>0">+{{userData.contract_count_diff*1}}</div>
              </div>
            </div>
            <!--          收益-->
            <div class="listItems borderRight">
              <h3 class="flex-start">收益</h3>
              <div class="listItemsNum flex-space-between">
                <div>{{userData.profit_amount*1?userData.profit_amount*1:0 | dataWord}}</div>
                <div v-if="userData.profit_amount_diff*1>0">+{{userData.profit_amount_diff*1}}</div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader.vue"
  import {GETUSERDATA} from "../../apis/mine";
  export default {
    name:"myData",
    components:{
      commonHeader,
    },
    data() {
      return {
        title:"我的数据",
        userData:{},//我的数据
      }
    },
    mounted() {

      // 获取我的数据
      this.getUserData();
    },
    methods:{
      // 返回
      goBack(){
        if (window.history.length>1){
          window.history.go(-1)
        }else {
          if (this.$systemInfo() === "android") {
            window.android.closeCurrentPage();
          } else if (this.$systemInfo() === "ios") {
            window.webkit.messageHandlers.closeCurrentPage.postMessage(null);
          }
        }
      },
      // -------------------接口开始------------------
      // 获取我的数据
      getUserData(){
        let getUserData = GETUSERDATA
        getUserData().then(res=>{
          if(res.data.code*1===200){
            this.userData = res.data.data;
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      // ------------------------接口结束------------------
    },
    filters:{
      // 筛选 大于一万的显示 万字
      dataWord(item){
       return item*1>10000?item*1/10000 + 'w':item*1
      }
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .myData{
    width:100%;
    position: relative;
    .content{
      width:100%;
      position: absolute;
      top:1.64rem;
      z-index:10;
      margin-bottom:0.5rem;
      .contentList{
        width:100%;
        padding:0 0.3rem;
        box-sizing: border-box;
        .commonContainer{
          width:100%;
          .title{
            width:100%;
            height:0.93rem;
            padding:0 0.28rem;
            box-sizing: border-box;
            font-size:@fontSize34;
            font-family:@fontFamily400;
            font-weight:@fontWeight500;
            color:#FFFFFF;
            img{
              width:0.26rem;
              height:auto;
              margin-left:0.08rem;
            }
          }
          .lists{
            width:100%;
            flex-wrap: wrap;
            .listItems{
              width:50%;
              height:1.38rem;
              padding:0.22rem 0.28rem;
              box-sizing: border-box;
              h3{
                font-size:@fontSize34;
                font-family:@fontFamily400;
                font-weight:@fontWeight500;
                color:#FFFFFF;
                margin-bottom:0.06rem;
              }
              .listItemsNum{
                font-size:@fontSize28;
                font-family:@fontFamily400;
                font-weight:@fontWeight500;
                color:#999999;
                div:nth-of-type(2){
                  color:#FC0B1C;
                }
              }
            }

          }
        }
      }
    }
    .commonBg{
      width:100%;
      background: #232323;
      border-radius: 0.1rem;
      margin-bottom:0.2rem;
    }
    .borderBottom{
      border-bottom: 0.02rem solid #444444;
    }
    .borderRight{
      border-right: 0.02rem solid #444444;
    }
  }
</style>
